import 'dart:convert';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:life_milestones/controller/MS-mile-stone-controller.dart';
import 'package:life_milestones/util/MS-pick-image-util.dart';
import 'package:stroke_text/stroke_text.dart';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'package:provider/provider.dart';

import '../MS-Model/MS-milestone.dart';
import '../controller/MS-global-user-controller.dart';
class MSPostImagePage extends StatefulWidget {
  final int month;
  const MSPostImagePage({super.key, required this.month});

  @override
  State<StatefulWidget> createState() {
    return _MSPostImagePageState();
  }
}

class _MSPostImagePageState extends State<MSPostImagePage> {
  List<String> path = [];
  @override
  Widget build(BuildContext context) {
   return Consumer<MSMileStoneController>(builder: (BuildContext context,MSMileStoneController controller,Widget? c){
     return Scaffold(
       backgroundColor: Color(0xFF148857),
       body: SizedBox.expand(
           child: Stack(
             children: [
               Positioned(
                 left: 0,
                 right: 0,
                 top: ScreenUtil().statusBarHeight,
                 bottom: 0,
                 child: Image.asset(
                   "images/mile-stone-post-bg.png",
                   fit: BoxFit.fitWidth,
                 ),
               ),
               Positioned(
                   left: 0,
                   right: 0,
                   top: ScreenUtil().statusBarHeight,
                   bottom: 0,
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
                       Padding(
                         padding: EdgeInsets.only(top: 32.w, left: 24.w),
                         child: InkWell(
                           onTap: () {
                             Navigator.of(context).pop();
                           },
                           child: Image.asset(
                             "images/back.png",
                             width: 25.w,
                             fit: BoxFit.fitWidth,
                           ),
                         ),
                       ),
                       Padding(
                         padding: EdgeInsets.only(top: 12.w),
                         child: SizedBox(
                           width: double.infinity,
                           child: Row(
                             mainAxisAlignment: MainAxisAlignment.center,
                             children: [
                               StrokeText(
                                 text: "Things I want to record",
                                 strokeWidth: 2.w,
                                 strokeColor: Color(0xFF065F39),
                                 textStyle: TextStyle(
                                     fontSize: 25.sp,
                                     fontWeight: FontWeight.bold,
                                     color: Colors.white),
                               )
                             ],
                           ),
                         ),
                       ),
                       Padding(
                         padding:
                         EdgeInsets.only(left: 24.w, right: 24.w, top: 73.w),
                         child: Container(
                           width: 327.w,
                           height: 451.w,
                           decoration: const BoxDecoration(
                               image: DecorationImage(
                                   image: AssetImage("images/post-bg.png"))),
                           padding: EdgeInsets.only(
                               left: 44.w, right: 40.w, top: 97.w, bottom: 107.w),
                           child: Column(
                             children: [
                               Expanded(
                                   child: CustomScrollView(
                                     slivers: [
                                       SliverGrid(
                                         gridDelegate:
                                         SliverGridDelegateWithMaxCrossAxisExtent(
                                           maxCrossAxisExtent: 118.w,
                                           mainAxisSpacing: 8.w,
                                           crossAxisSpacing: 8.w,
                                           childAspectRatio: 118 / 87,
                                         ),
                                         delegate: SliverChildBuilderDelegate(
                                               (BuildContext context, int index) {
                                             if (index < path.length) {
                                               return Container(
                                                 width: 118.w,
                                                 height: 87.w,
                                                 decoration: BoxDecoration(
                                                     color: Colors.white,
                                                     borderRadius:
                                                     BorderRadius.circular(23.w)),
                                                 alignment: Alignment.center,
                                                 child: Stack(
                                                   children: [
                                                     Positioned.fill(
                                                         child: Container(
                                                           decoration: BoxDecoration(
                                                             borderRadius:
                                                             BorderRadius.circular(23.w),
                                                           ),
                                                           clipBehavior: Clip.antiAlias,
                                                           child:Image.file(
                                                             File(path[index]),
                                                             fit: BoxFit.cover,
                                                           ),
                                                         )),
                                                     Positioned(
                                                         top: -3.w,
                                                         right: -3.w,
                                                         child: InkWell(
                                                           onTap:(){
                                                             setState(() {
                                                               path.removeAt(index);
                                                             });
                                                           },
                                                           child: Image.asset(
                                                             "images/post-image-delete.png",
                                                             width: 24.w,
                                                             fit: BoxFit.fitWidth,
                                                           ),
                                                         ))
                                                   ],
                                                 ),
                                               );
                                             }
                                             return InkWell(
                                               onTap: () {
                                                 pickImages(context, 1).then((value) {
                                                   getApplicationDocumentsDirectory()
                                                       .then((dir) {
                                                     value.forEach((element) async {
                                                       File file = File(element);
                                                       File target = File("${dir.path}/${element.split("/").last}");
                                                       var result = await target.writeAsBytes(file.readAsBytesSync());
                                                       setState(() {
                                                         path.add(result.path);
                                                       });

                                                     });
                                                   });
                                                 });
                                               },
                                               child: Container(
                                                 width: 118.w,
                                                 height: 87.w,
                                                 decoration: BoxDecoration(
                                                     color: Colors.white,
                                                     borderRadius:
                                                     BorderRadius.circular(23.w)),
                                                 alignment: Alignment.center,
                                                 child: Image.asset(
                                                   "images/post-image.png",
                                                   width: 37.w,
                                                   fit: BoxFit.fitWidth,
                                                 ),
                                               ),
                                             );
                                           },
                                           childCount: path.length + 1,
                                         ),
                                       )
                                     ],
                                   )),
                               Divider(
                                 height: 19.w,
                                 color: Colors.transparent,
                               ),
                               InkWell(
                                 onTap: (){
                                   if(path.isNotEmpty){
                                     controller.addMileStone(MSMileStone(
                                       userId: MSGlobalUserController().user!.userId!,
                                       month: widget.month,
                                       type: Type.image,
                                       content: jsonEncode(path)
                                     ));
                                     Navigator.of(context).pop();
                                   }
                                 },
                                 child: Container(
                                   width: 165.w,
                                   height: 39.w,
                                   decoration: const BoxDecoration(
                                       image: DecorationImage(
                                           image: AssetImage(
                                               "images/home-save-button-bg.png"),
                                           fit: BoxFit.fill)),
                                   alignment: Alignment.center,
                                   child: StrokeText(
                                     text: "publish",
                                     strokeColor: Colors.white,
                                     strokeWidth: 1.w,
                                     textStyle: TextStyle(
                                         fontSize: 12.sp,
                                         fontWeight: FontWeight.bold,
                                         color: Color(0xFF333333)),
                                   ),
                                 ),
                               )
                             ],
                           ),
                         ),
                       )
                     ],
                   ))
             ],
           )),
     );
   });
  }
}
